/**
 *@auther: tang
 *@Date: 2020-11-16
 *Project: group-booking-shop-manage-system
 */
import React from "react"
import options from "../../../../util/proLocation";
import ImgCrop from 'antd-img-crop';
import {
    Row,
    Col,
    Form,
    Input,
    Button,
    Cascader,
    Radio,
    Upload
} from 'antd';
const location = options;

class storeInfo extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            pcLogofileList:[{
                uid: '-1',
                name: 'image.png',
                status: 'done',
                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            }],
            wChatLogofileList:[{
                uid: '-1',
                name: 'image.png',
                status: 'done',
                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            }],
            custype:1,
            closeshop:false,
            clShopReason:false,
            initialValues:{
                address: undefined,
                closeshop: false,
                cuslink: undefined,
                cusphone: undefined,
                custype: 1,
                description: undefined,
                followby: false,
                groupdate: undefined,
                keys: undefined,
                name: undefined,
                province: undefined,
                refundtime: undefined,
                title: undefined
            }
        }
    }
    onFormLayoutChange = (name,info)=> {
        // console.log(name,info)
    };
    componentWillMount() {
        this.state.closeshop?this.setState({
            clShopReason:false
        }):this.setState({
            clShopReason:true
        })
    }
    setCustype(e){
        this.setState({
            custype:e.target.value
        })
    }
    onPcLogoPreview = async file => {
        let pcsrc = file.url;
        if (!pcsrc) {
            pcsrc = await new Promise(resolve => {
                const reader = new FileReader();
                reader.readAsDataURL(file.originFileObj);
                reader.onload = () => resolve(reader.result);
            });
        }
        const image = new Image();
        image.src = pcsrc;
        const imgWindow = window.open(pcsrc);
        imgWindow.document.write(image.outerHTML);
    };
    onWchatLogoPreview = async file => {
        let src = file.url;
        if (!src) {
            src = await new Promise(resolve => {
                const reader = new FileReader();
                reader.readAsDataURL(file.originFileObj);
                reader.onload = () => resolve(reader.result);
            });
        }
        const image = new Image();
        image.src = src;
        const imgWindow = window.open(src);
        imgWindow.document.write(image.outerHTML);
    };
    setCloseShop(e){
        this.setState({
            closeshop:e.target.value
        });
        e.target.value?this.setState({
            clShopReason:false
        }):this.setState({
            clShopReason:true
        })
    }
    onPcLogoChange(fileList){
        this.setState({
            pcLogofileList:fileList
        })
    }
    onWchatLogoChange(fileList){
        this.setState({
            wChatLogofileList:fileList
        })
    }
    formSubmitHandle(info){
        console.log(info)
    }
    wChatRemove(){
        return true
    }
    render() {
        return (
            <div>
                <Form
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 14,
                    }}
                    layout="horizontal"
                    onValuesChange={this.onFormLayoutChange.bind(this)}
                    size="default"
                    initialValues={this.state.initialValues}
                    onFinish={this.formSubmitHandle.bind(this)}
                >
                    <Form.Item label="商店名称" name="name" rules={[
                        {
                            required:true,
                            message:"商店名称必填"
                        }
                    ]}>
                        <Input />
                    </Form.Item>
                    <Form.Item label="商店标题" name="title" rules={[
                        {
                            required:true,
                            message:"商店标题必填"
                        }
                    ]}>
                        <Input />
                    </Form.Item>
                    <Form.Item label="商店描述" name="description">
                        <Input />
                    </Form.Item>
                    <Form.Item label="商店关键字" name="keys">
                        <Input />
                    </Form.Item>
                    <Form.Item label="所在地区" name="address" rules={[
                        {
                            required:true,
                            message:"所在地区必选"
                        }
                    ]}>
                        <Cascader
                            options={location}
                            placeholder="请选择"
                        />
                    </Form.Item>
                    <Form.Item label="详细地址" name="province">
                        <Input />
                    </Form.Item>
                    <Form.Item label="客服类型" name="custype">
                        <Radio.Group onChange={this.setCustype.bind(this)} value={this.state.custype}>
                            <Radio value={1}>QQ客服</Radio>
                            <Radio value={2}>第三方客服</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="客服链接" name="cuslink">
                        <Input/>
                    </Form.Item>
                    <Form.Item label="客服电话" name="cusphone">
                        <Input/>
                    </Form.Item>
                    <Form.Item label="暂时关闭商店" name="closeshop">
                        <Radio.Group onChange={this.setCloseShop.bind(this)}>
                            <Radio value={false}>否</Radio>
                            <Radio value={true}>是</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="关闭商店的原因" name="cusphone">
                        <Input.TextArea disabled={this.state.clShopReason}/>
                    </Form.Item>
                    <Form.Item label="pc端logo" name="pclogo">
                        <ImgCrop rotate>
                            <Upload
                                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                listType="picture-card"
                                fileList={this.state.pcLogofileList}
                                onChange={this.onPcLogoChange.bind(this)}
                                onPreview={this.onPcLogoPreview.bind(this)}
                            >
                                {this.state.pcLogofileList.length < 2 && '+ Upload'}
                            </Upload>
                        </ImgCrop>
                    </Form.Item>
                    <Form.Item label="微信端logo" name="wchatlogo">
                        <ImgCrop rotate>
                            <Upload
                                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                listType="picture-card"
                                fileList={this.state.wChatLogofileList}
                                onChange={this.onWchatLogoChange.bind(this)}
                                onPreview={this.onWchatLogoPreview.bind(this)}
                                onRemove={this.wChatRemove.bind(this)}
                            >
                                {this.state.wChatLogofileList.length < 2 && '+ Upload'}
                            </Upload>
                        </ImgCrop>
                    </Form.Item>
                    <Form.Item label="成团时间" name="groupdate">
                        <Input/>
                    </Form.Item>
                    <Form.Item label="申请退款时间" name="refundtime">
                        <Input/>
                    </Form.Item>
                    <Form.Item label="关注后购买" name="followby">
                        <Radio.Group>
                            <Radio value={false}>否</Radio>
                            <Radio value={true}>是</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item >
                        <Row>
                            <Col span={6}/>
                            <Col span={6}>
                                <Button htmlType="submit" type="primary">提交</Button>
                            </Col>
                        </Row>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}

export {storeInfo as default}
